<template>
  <div>
    <el-drawer
      :before-close="closeDrawer"
      :show-close="false"
      :visible.sync="isShow"
      :withHeader="false"
      size="80%"
    >
      <div style="padding: 10px">
        <!-- 表格 -->
        <el-table ref="table" height="85vh" :data="skuList">
          <el-table-column fixed type="" align="center" width="80" label="操作">
            <template #default="{ row }">
              <el-button-group>
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  v-if="row.checked"
                  @click="deleteSku(row)"
                ></el-button>
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-plus"
                  v-else
                  @click="addSku(row)"
                ></el-button>
              </el-button-group>
            </template>
          </el-table-column>
          <el-table-column label="ID" prop="id"> </el-table-column>
          <el-table-column label="名称" prop="skuName"></el-table-column>
          <el-table-column label="描述" prop="skuDesc"></el-table-column>
          <el-table-column label="默认图片">
            <template slot-scope="{ row }">
              <img
                style="width: 120px; height: 100px; object-fit: contain"
                :src="row.skuDefaultImg"
              />
            </template>
          </el-table-column>
          <!-- <el-table-column label="重量(KG)" prop="weight"></el-table-column>
          <el-table-column label="价格(元)" prop="price"></el-table-column> -->
          <el-table-column align="center" width="160">
            <template #header>
              <el-input
                style="width: 68%"
                placeholder="搜索SKU"
                size="mini"
                v-model.trim="keyword"
                @keyup.native.enter="searchSku"
              ></el-input>
              <el-button
                type="success"
                icon="el-icon-search"
                size="mini"
                @click="searchSku"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          v-show="showPagination"
          @current-change="getSkuList($event)"
          @size-change="getSkuList(false, $event)"
          style="text-align: center"
          :current-page="currentPage"
          layout="total,sizes, prev, next, jumper, ->"
          :page-size="limitSize"
          :page-sizes="[10, 20, 30, 50, 100, 200, 300, 500]"
          :total="totalPage"
        ></el-pagination>
        <div style="display: flex; justify-content: left">
          <el-button type="primary" size="medium" @click="clickOk"
            >确定</el-button
          >
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'SelectSKU',
  props: {
    visible: {
      default: false
    }
  },
  computed: {},
  data() {
    return {
      selectList: [],
      //搜索sku
      showPagination: true,
      keyword: '',
      //
      isShow: false,
      skuList: [],
      totalPage: 0,
      limitSize: 10,
      currentPage: 1
    }
  },
  watch: {
    visible(val) {
      this.isShow = val
      if (!val) {
        //不显示时,清空数据
        this.selectList = []
        this.$refs.table.clearSelection()
        //更新表格数据,覆盖上一次操作后的数据
        this.getSkuList()
      } else {
      }
    }
  },
  methods: {
    //修改模式时,获取已选择的sku,并展示
    async initSkuIdList(val, callFun) {
      try {
        if (val && val.length) {
          let ok = true
          for (let i in val) {
            let id = val[i]
            const res = await this.$API.sku.getSkuInfoById(id)
            if (res.ok) {
              this.selectList.push(res.data)
            } else {
              ok = false
              break
            }
          }

          if (!ok) {
            this.$message({ type: 'error', message: '获取sku信息错误' })
            this.closeShow()
          } else {
            //重新初始化checked,显示添加,删除按钮
            this.initSkuList()
            try {
              //让表单中显示以选择的sku
              this.$emit(
                'getSelectList',
                JSON.parse(JSON.stringify(this.selectList))
              )
            } catch (error) {}
          }
        }
        
        callFun()
      } catch (error) {}
    },
    //对获取的sku初始化checked标记
    initSkuList() {
      let { skuList } = this
      this.selectList.forEach((item) => {
        for (let i in skuList) {
          if (skuList[i].id == item.id) {
            this.$set(skuList[i], 'checked', true)
            // skuList[i].checked = true
            break
          }
        }
      })
    },
    //删除SKU
    deleteSku(row) {
      // row.checked = false
      this.$set(row, 'checked', false)
      this.selectList = this.selectList.filter((item) => item.id != row.id)
    },
    //添加sku
    addSku(row) {
      // row.checked = true
      this.$set(row, 'checked', true)
      this.selectList.push(row)
    },
    // 关闭显示
    closeShow() {
      this.$emit('update:visible', false)
    },
    clickOk() {
      this.$emit('getSelectList', this.selectList)
      this.closeShow()
    },
    //搜索sku
    async searchSku() {
      if (this.keyword) {
        this.showPagination = false
        const res = await this.$API.sku.searchSku(this.keyword)
        this.skuList = res
        //初始checked
        this.initSkuList()
      } else {
        this.getSkuList()
        this.showPagination = true
      }
    },
    closeDrawer() {
      // this.isShow = false
      this.closeShow()
    },
    // 展示列表
    async getSkuList(page, limit) {
      this.showPagination = true
      let { currentPage, limitSize } = this
      if (page) {
        currentPage = page
      }
      if (limit) {
        limitSize = limit
      }

      const res = await this.$API.sku.getSkuList(currentPage, limitSize)
      if (res.code == 200) {
        this.skuList = res.data.records
        this.totalPage = res.data.total
        //初始checked
        this.initSkuList()
      }
    }
  },
  created() {
    this.getSkuList()
    this.$Bus.$on('initSkuIdList', this.initSkuIdList)
  }
}
</script>

<style>
.el-drawer__open .el-drawer.rtl {
  box-shadow: 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 30px 0 0 30px;
}
</style>
